<template>
  <view class="container">
    <view class="content">
      <view
        @click="toCourse(item)"
        :class="['card_item', item.expiredFlag == 1 ? 'passTime' : '']"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="itemLeft">
          <image
            class="photo image-border"
            :src="item.coursePic"
            alt=""
          ></image>
          <image
            v-if="item.expiredFlag == 1"
            class="mark"
            src="../../static/images/course/icon7.png"
            alt=""
          ></image>
        </view>
        <view class="itemRight">
          <!-- 课程名 -->
          <view class="objectName overtxt"> {{ item.courseName }} </view>
          <!-- 图标 -->
          <view class="objectMsg">
            <div class="count_part">
              <img
                class="count_icon"
                src="../../static/images/course/icon8.png"
                alt=""
              />
              <view class="overtxt"> {{ item.teacherNames }}</view>
            </div>
            <div class="count_part">
              <img
                class="count_icon"
                src="../../static/images/course/icon5.png"
                alt=""
              />
              <view class="overtxt">
                {{ item.finishTasks ? item.finishTasks : 0 }}/{{
                  item.allTasks ? item.allTasks : 0
                }}</view
              >
            </div>
            <div class="count_part">
              <img
                class="count_icon"
                src="../../static/images/course/icon6.png"
                alt=""
              />
              <view class="overtxt">
                {{ item.finishExams ? item.finishExams : 0 }}/{{
                  item.allExams ? item.allExams : 0
                }}</view
              >
            </div>
          </view>
          <!-- 学习进度 -->
          <view class="percentage_all" v-if="item.studyStatus == 1">
            <text class="percentage_label">学习进度</text>
            <view class="percentage_value">
              <van-progress
                stroke-width="5px"
                :percentage="item.percentage.replace('%', '')"
                color="linear-gradient(270deg, #F76B1C 0%, #FAD961 100%)"
                track-color="#ececec"
              />
            </view>
            <text class="percentage_num">{{ item.percentage }}</text>
          </view>
          <!-- 完成 -->
          <view class="courseEnd" v-if="item.studyStatus == 2">
            <view class="courseSore" v-if="item.avgScore">
              总得分：{{ item.avgScore.toFixed(2) }}分
            </view>
            <view class="courseSore" v-else> 已通过</view>
            <view class="courseBtn">
              <van-button
                @click="toRecord(item)"
                round
                plain
                type="info"
                color="#F85415"
                >课程成绩</van-button
              >
            </view>
          </view>
        </view>
      </view>
      <view style="height: 20rpx"></view>
    </view>
  </view>
</template>

<script>
import { courseStuList } from "../../common/api/studyRecord";
export default {
  name: "myScore",
  data() {
    return {
      list: [],
    };
  },
  onShow() {
    this.getList();
  },
  onLoad(option) {},
  methods: {
    async getList() {
      uni.showLoading({ title: "加载中" });
      let res = await courseStuList(uni.getStorageSync("stuId"));
      this.list = res.data;
    },
    /* 查看成绩 */
    toRecord(item) {
      uni.navigateTo({
        url: `/pages_teaching/studentStudyDetail?courseStuId=${item.courseStuId}`,
      });
    },
    /* 查看课程 */
    toCourse(item) {
      if (item.expiredFlag == 0) {
        uni.navigateTo({
          url: `/pages/selectiCourse/courseDetail?orderCourseId=${item.orderCourseId}&type=study`,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.passTime {
  .objectName {
    color: #d3d2d2 !important;
  }
  .photo {
    filter: brightness(0.4) !important;
  }
  .count_part {
    view {
      color: #d3d2d2 !important ;
    }
  }
  .courseSore {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #d3d2d2 !important;
    line-height: 56rpx;
  }
}
.container {
  width: 750rpx;
  min-height: 100vh;
  background: #f6f7f8;

  .content {
    padding: 0 32rpx 20rpx 32rpx;

    box-sizing: border-box;

    .card_item {
      margin-top: 20rpx;
      width: 100%;
      min-height: 200rpx;
      height: 232rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx 20rpx 20rpx 20rpx;
      box-sizing: border-box;
      display: flex;
    }

    .itemLeft {
      margin-right: 20rpx;
      position: relative;
    }

    .itemRight {
      width: 410rpx;
    }

    .objectName {
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #333333;
      // line-height: 42rpx;
      margin-bottom: 16rpx;
    }

    .photo {
      width: 216rpx;
      height: 136rpx;
      border-radius: 16rpx;

      // background: #9649e4;
    }

    .mark {
      width: 108rpx;
      height: 108rpx;
      position: absolute;
      top: 14rpx;
      left: 54rpx;
    }

    .objectMsg {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .count_part {
        display: flex;
        align-items: center;

        .count_icon {
          width: 32rpx;
          height: 32rpx;
        }

        view {
          width: 115rpx;
          margin-left: 4rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  // 学习进度
}

.percentage_all {
  margin-top: 44rpx;
  display: flex;
  align-items: center;

  .percentage_label {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .percentage_value {
    flex: 1;
    margin-left: 14rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .percentage_num {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f85314;
    margin-left: 18rpx;
  }
}

.courseEnd {
  margin-top: 34rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .courseSore {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #04b900;
    line-height: 56rpx;
  }

  ::v-deep .van-button {
    padding: 12rpx;
    width: 160rpx;
    height: 56rpx;
    line-height: 56rpx;
    box-sizing: border-box;
  }
}
</style>